<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <link rel="stylesheet" href="https://cdn.bootcss.com/weui/1.1.2/style/weui.min.css">
    <link href="https://cdn.bootcss.com/jquery-weui/1.2.0/css/jquery-weui.css" rel="stylesheet">
    <link href="https://cdn.bootcss.com/webuploader/0.1.1/webuploader.css" rel="stylesheet">
</head>
<body>
<h1>图片上传</h1>
<div>
    <div class="weui-uploader__input-box ">
        <div class="weui-uploader__input" id="picker1">
    </div>
        <!--用来存放文件信息-->
        <div id="thelist" class="uploader-list"></div>
        <div id="uploader" class="wu-example">
            <div class="btns">
                <div class="weui-uploader__input" id="picker">选择文件</div>
            </div>
        </div>
</div>
<script src="https://cdn.bootcss.com/jquery/3.3.1/jquery.js"></script>
<script src="https://cdn.bootcss.com/jquery-weui/1.2.0/js/jquery-weui.min.js"></script>
<script src="https://cdn.bootcss.com/webuploader/0.1.1/webuploader.js"></script>
<script src="../../lib/web/webuploader/WebUploaderUtils.js"></script>
<script>
    $(document).ready(function(){
        var config = {
            "uploadSuccessCallBack":function(file){
                console.log("文件上传成功1")
            },
            "uploadErrorCallBack":function(file){
                console.log("文件上传失败2")
            },
            "uploadCompleteCallBack":function(file){
                console.log("文件上传完成3")
            },
            "fileQueuedCallBack":function(file){
                $("#thelist").after("<div>file1等待上传...</div>")
                console.log("文件进入队列4")
            },
            "uploadProgressCallBack":function(file, percentage){
                console.log("uploadProgress5")
            }
        };
        var webUploader = new WebUploaderUtils(config)
        webUploader.init();
    })
</script>
</body>
</html>